<template>

    <!-- <div style="height: calc(100% - 265px);width: 100%;position: relative;"> -->
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo"
        style="width: 100%; height: calc(100% - 335px);color: #fff;overflow-y: scroll;" router @select="handleSelect">

        <template v-for="(item) in left_list">
            <el-menu-item :index="item.path" v-if="!item.children" :key="item.id" @click="tohome(item.name)">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>

            <el-submenu :index="item.id" v-else :key="item.id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </template>
                <el-menu-item :index="items.path" v-for="(items) in item.children" :key="items.id">
                    <span slot="title">{{ items.name }}</span>
                </el-menu-item>

            </el-submenu>
        </template>





        <div style="" class="menuBottom">
            <el-menu-item index="/userset" class="aaa">
                <i class="el-icon-setting"></i>
                <span slot="title">账户设置</span>
            </el-menu-item>
            <div style="" class="menu-bottom d-center">
                <i class="el-icon-upload "></i>
                <!-- <i class="po-c  el-icon-cloudy"></i>
                <i class="po-c  el-icon-download"></i> -->
            </div>
        </div>




    </el-menu>
    <!-- </div> -->
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            left_list: [

                {
                    icon: "el-icon-house",
                    name: "首页",
                    id: "1",
                    path: "/homepage"
                },
                {
                    icon: "el-icon-document-remove",
                    name: "财务部",
                    id: "2",
                    children: [{
                        name: "利润表",
                        id: "211",
                        path: "/profitTable"
                    }, {
                        name: "资产负债表",
                        id: "212",
                        path: "/balanceTable"
                    }, {
                        name: "现金流量表",
                        id: "213",
                        path: "/cashTable"
                    }, {
                        name: "应收款",
                        id: "214",
                        path: "/accountReceivable"
                    }, {
                        name: "库存",
                        id: "215",
                        path: "/inventory"

                    }, {
                        name: "临时报表",
                        id: "216",
                        path: "/forTable"
                    }]
                },
                {
                    icon: "el-icon-printer",
                    id: "30",
                    name: "分析",
                    path: "/profit"
                },
                {
                    icon: "el-icon-printer",
                    id: "3",
                    name: "研发部",
                    path: "/research"
                },

                {
                    icon: "el-icon-mobile",
                    id: "4",
                    name: "生产部",
                    path: "/productions"
                },
                {
                    icon: "el-icon-files",
                    id: "5",
                    name: "采购部",
                    path: "/purchase"
                },
                {
                    icon: "el-icon-shopping-cart-full",
                    id: "6",
                    name: "仓库部",
                    path: "/warehouse"
                },
                {
                    icon: "el-icon-connection",
                    id: "7",
                    name: "销售部",
                    path: "/market"
                },
                {
                    icon: "el-icon-user",
                    id: "8",
                    name: "人事部",
                    path: "/personnel"
                },
                {
                    icon: "el-icon-edit",
                    id: "9",
                    name: "在线编辑",
                    path: '/onlineEdit'
                },

            ],
            activeIndex: '/homepage',
            // newValur:""
            sessRouter: sessionStorage.getItem('keyPath')
        }
    },
    created() { },
    mounted() { this.activeIndex = sessionStorage.getItem('keyPath') || '/homepage'; },
    methods: {
        handleSelect(keyPath) {
            sessionStorage.setItem('keyPath', keyPath);
        },
        tohome(name) {
            console.log(name)


            if (name == '首页') {
                localStorage.setItem('tab_top', 0)
            }
        }
    },
    watch: {
        activeIndex(newValue) {
            // if (newValur != this.$route.path) {
            //     this.activeIndex = this.$route.path;
            // }
        }
    }
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.el-menu {
    overflow-x: hidden;
    background-image: linear-gradient(transparent, #fff);

    li {
        background-color: transparent;
    }
}

.el-menu-item.is-active {
    background-color: #3c6cfe;
    color: #fff;
    width: 200px;
    z-index: 99;
}

.el-menu-item:hover {
    background-color: #bed5ee;
    color: #000;
}


.menuBottom {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 200px;
    // height: 130px;

    .aaa {
        // margin-top: 30px;
    }

    .menu-bottom {
        cursor: pointer;
        width: 40px;
        height: 40px;
        background-color: #3c6cfe;
        border-radius: 8px;
        position: relative;
        margin-left: 28%;
        margin-top: 5px;
        margin-bottom: 20px;

        >i:nth-child(1) {
            font-size: 20px;
        }

        >i:nth-child(2) {
            top: 55%;
        }
    }
}
</style>
